<template>
	<el-tabs v-model="activeName" class="demo-tabs" :stretch="true" type="border-card">
		<el-tab-pane label="基于副本池创建" name="replica">
			<el-form
				ref="volumeFormRef"
				:model="volumeForm"
				:rules="rules"
				label-width="100px"
				status-icon
				v-if="activeName ==='replica'"
			>
				<el-form-item label="存储池" prop="poolName">
					<template v-slot:label>
						<div>
							<span>存储池</span>
							<el-tooltip content="基于副本池创建的存储卷元数据和数据都在同一副本池中；DSMS会为每个存储卷预留100M的元数据空间" :enterable="false">
								<el-icon><ele-QuestionFilled /></el-icon>

							</el-tooltip>
						</div>
					</template>
					<el-select
						v-model="volumeForm.poolName"
						placeholder="请选择副本池"
						style="width:100%"
						:loading="poolNameLoading"
					>
						<el-option
							v-for="item in replicaOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value"

						>
							<span>{{ item.label }}</span>
							<span style="float: right">{{ item.desc }}</span>
						</el-option>
					</el-select>

				</el-form-item>
				<el-form-item label="名称" prop="rbdName">
					<el-input v-model="volumeForm.rbdName" />
				</el-form-item>
				<el-form-item label="容量(G)" prop="rbdSize">
					<el-input v-model="volumeForm.rbdSize" />
				</el-form-item>
			</el-form>
		</el-tab-pane>
		<el-tab-pane label="基于纠删码池创建" name="erasure">
			<el-form
				ref="volumeFormRef"
				:model="volumeForm"
				:rules="erasureRules"
				label-width="100px"
				status-icon
				v-if="activeName ==='erasure'"
			>
				<el-form-item label="存储池" prop="poolName">
					<template v-slot:label>
						<div>
							<span>元数据池</span>
							<el-tooltip content="基于纠删码池创建的存储卷需要将该存储卷的元数据保存在副本池中；DSMS会为每个存储卷预留100M的元数据空间" :enterable="false">
								<el-icon><ele-QuestionFilled /></el-icon>

							</el-tooltip>
						</div>
					</template>
					<el-select
						v-model="volumeForm.poolName"
						placeholder="请选择副本池"
						style="width:100%"
						:loading="poolNameLoading"
					>
						<el-option
							v-for="item in replicaOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value"

						>
							<span>{{ item.label }}</span>
							<span style="float: right">{{ item.desc }}</span>
						</el-option>
					</el-select>

				</el-form-item>
				<el-form-item label="存储池" prop="dataPoolName">
					<template v-slot:label>
						<div>
							<span>数据池</span>
							<el-tooltip content="存储卷数据池用于存放存储卷的数据，它将使用纠删码池的冗余模式保存数据" :enterable="false">
								<el-icon><ele-QuestionFilled /></el-icon>

							</el-tooltip>
						</div>
					</template>
					<el-select
						v-model="volumeForm.dataPoolName"
						placeholder="请选择纠删码池"
						style="width:100%"
						:loading="dataPoolNameLoading"
					>
						<el-option
							v-for="item in erasureOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value"

						>
							<span>{{ item.label }}</span>
							<span style="float: right">{{ item.desc }}</span>
						</el-option>
					</el-select>

				</el-form-item>
				<el-form-item label="名称" prop="rbdName">
					<el-input v-model="volumeForm.rbdName" />
				</el-form-item>
				<el-form-item label="容量(G)" prop="rbdSize">
					<el-input v-model="volumeForm.rbdSize" />
				</el-form-item>
			</el-form>
		</el-tab-pane>
	</el-tabs>

</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
import { useStorageApi } from '/@/api/storage';
import { useBlockStorageApi } from '/@/api/block-storage/index';
import { formatUnits } from '/@/utils/other';

export interface VolumeForm{
	rbdName: string,
	rbdSize: string,
	dataPoolName?:string,
	poolName: null | string,
	basedOnEra:boolean
}
const activeName = ref('replica');
const replicaOptions = ref<any[]>([]);
const erasureOptions = ref<any[]>([]);

let poolNameLoading = ref(true);
let dataPoolNameLoading = ref(true);
// 正则验证
const checkRbdName = (rule:any, value:any, callback:any) => {
	if (!value) {
		return callback(new Error('请输入名称'));
	}
	callback();
};
const checkRbdSize = (rule:any, value:any, callback:any) => {
	if (!value) {
		return callback(new Error('请输入存储卷容量'));
	}

	if (!/^(0|[1-9]\d*)(\.\d{1,2})?$/.test(value)) {
		return callback(new Error('只能输入正数,且保留2位小数'));
	}
	callback();
};

const rules = reactive<FormRules>({
	rbdName: [{ required: true, validator: checkRbdName, trigger: 'blur' }],
	rbdSize: [{ required: true, validator: checkRbdSize, trigger: 'blur' }],
	poolName: [{ required: true, message: '请选择副本池', trigger: 'blur' }]
});
const erasureRules = reactive<FormRules>({
	rbdName: [{ required: true, validator: checkRbdName, trigger: 'blur' }],
	rbdSize: [{ required: true, validator: checkRbdSize, trigger: 'blur' }],
	poolName: [{ required: true, message: '请选择副本池', trigger: 'blur' }],
	dataPoolName: [{ required: true, message: '请选择纠删码池', trigger: 'blur' }]
});
const volumeForm = reactive<VolumeForm>({
	rbdName: '',
	rbdSize: '',
	poolName: null,
	basedOnEra: false
});
// replica 副本
// erasure 纠删码

const volumeFormRef = ref<FormInstance>();
const emits = defineEmits(['update:value']);
const createVolume = () => {
	if (!volumeFormRef.value) return;
	if (activeName.value === 'replica') {
		volumeForm.basedOnEra = false;
	} else {
		volumeForm.basedOnEra = true;
	}
	volumeFormRef.value?.validate((valid:any) => {
		if (valid) {
			useBlockStorageApi().addVolume(volumeForm).then(() => {
				ElMessage.success('添加【创建存储卷】任务成功');
				// close dialog
				emits('update:value', false);
			});
		}
	});
};
const byReplica = () => {
	useStorageApi().getPoolList({ 'fileSystem': '', 'isAvailable': true, 'pageNo': 1, 'pageSize': 100, 'poolType': 1 }).then(res => {
		replicaOptions.value = res.data.records.map((item:any) => {
			return {
				value: item.poolName,
				label: `${item.poolName}`,
				totalSize: item.totalSize,
				desc: `总容量：${formatUnits(item.totalSize)} 可划分容量：${formatUnits(item.rbdAvailableCapacity)}`
			};
		});
		poolNameLoading.value = false;
	});
};
const byErasure = () => {
	useStorageApi().getPoolList({ 'fileSystem': '', 'isAvailable': true, 'pageNo': 1, 'pageSize': 100, 'poolType': 3 }).then(res => {
		erasureOptions.value = res.data.records.map((item:any) => {
			return {
				value: item.poolName,
				label: `${item.poolName}`,
				totalSize: item.totalSize,
				desc: `总容量：${formatUnits(item.totalSize)} 可划分容量：${formatUnits(item.rbdAvailableCapacity)}`
			};
		});
		dataPoolNameLoading.value = false;
	});
};
const init = () => {
	byReplica();
	byErasure();
};
init();
defineExpose({
	createVolume
});

</script>
